<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TODO</title>
    <style>
        .done{
            text-decoration: line-through;
            color: grey;
        }
        .todo li{
            width: 200px;
            height: 20px;
            padding: 3px;
            position: relative;
        }
        .todo li button{
            position: absolute;
            top: 0;
            right: 0;
        }
        button:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h4>待办事项</h4>
    <input type="text" name="input" placeholder="请输入待办事项" id="inp">
    <button onclick="save()">保存</button>
    <h4>待办</h4>
    <ol class="todo" id="todo">
    </ol>
    <h4>已完成</h4>
    <ol class="done">    
    </ol>
    <script>
        //存放事件的数组
        let eventlist = [];
        //保存事件，添加到数组
        function save(){
            //获取事件（输入框的值）
            //inp是输入框的id
            let event = inp.value;
            //向数组添加内容，保存数据
            eventlist.push(event);
            console.log(eventlist);
            //声明一个字符串，存放ol的元素
            let content = '';
            // for循环，遍历数组，获取每一个事件并累加
            for(let index = 0; index < eventlist.length; index ++){
                content += `<li>${eventlist[index]}</li>`
                           //'<li>'+{eventlist[index]}+'</li>'
            }
            //innerHTML，里面的内容
            todo.innerHTML = content;
        }
    </script>
</body>
</html>